<template>
  <div class="news-index-main">
      <el-card shadow="never">
          <el-row :guttar="20">
              <el-form ref="form" :model="form" label-width="80px">
                  <el-col :span="12">
                        <el-form-item label="文章标题">
                            <el-input v-model="form.title"></el-input>
                        </el-form-item>
                    </el-col>
                <el-col :span="6" :offset="4">
                    <el-form-item label="作者">
                        <el-input v-model="form.author"></el-input>
                    </el-form-item>
                </el-col>
                
                <el-col  :offset="0">
                    <el-form-item label="摘要">
                        <el-input
                            type="textarea"
                            :rows="2"
                            placeholder="请输入内容"
                            v-model="form.desc">
                        </el-input>
                    </el-form-item>
                </el-col>
                <el-col >
                    <el-form-item label="图片">
                        <el-upload
                            :action="serveHost + '/admin/xy/upload/uploadImg'"
                            list-type="picture-card"
                            :on-preview="handlePictureCardPreview"
                            :on-remove="handleRemove">
                            <i class="el-icon-plus"></i>
                            </el-upload>
                            <el-dialog :visible.sync="dialogVisible">
                            <img width="100%" :src="dialogImageUrl" alt="">
                            </el-dialog>
                    </el-form-item>
                </el-col>
                <el-col :span="8"> 
                    <el-form-item label="显示文章">
                        <el-switch v-model="form.delivery"></el-switch>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="是否最热">
                        <el-switch v-model="form.hot">
                            <template slot-scope="scope">
                                {{ scope.row.hot == false?"0":"1"}}
                            </template>
                        </el-switch>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="文章显示封面" label-width="100px">
                        <el-switch v-model="form.delivery"></el-switch>
                    </el-form-item>
                </el-col>
                 <el-col :span="12">
                        <el-form-item label="文章内容1">
                            <el-input v-model="form.content1"></el-input>
                        </el-form-item>
                    </el-col>
                <el-col :span="12" >
                    <el-form-item label="文章内容2">
                        <el-input v-model="form.content2"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="切换富文本类型" label-width="120px">
                        <el-radio v-model="radio" label="0">富文本</el-radio>
                        <el-radio v-model="radio" label="1">markdown</el-radio>
                    </el-form-item>
                </el-col>
               
                <el-col :span="24" :offset="0" v-if="radio==0">
                    <TinymceEditor ref="tin" v-model="tinContent">富文本</TinymceEditor>
                    <el-button type="primary" size="default" @click = "getTin" >获取富文本内容</el-button>
                    <el-button type="primary" size="default" @click = "setTin">设置富文本内容</el-button>
                </el-col>

                <el-col :span="24" :offset="0" v-else>
                    markdown
                </el-col>
                </el-form>
          </el-row> 
      </el-card>
  </div>
</template>

<script>
import TinymceEditor from "@/components/Tinymce"
// import MarkdownEditor from "@/components/MarkdownEditor"
// import settingsFile from "@/settings"
import { newsDetail } from "@/api/material/news"
import settingsFile from "@/settings";
export default {
    components: {
        TinymceEditor,
        // MarkdownEditor
    },
    data() {
        return {
            serveHost: settingsFile.host,
            dialogImageUrl: '',
            dialogVisible: false,
            radio: '0',
            tinContent:'',
            id:'',
            form: {
                title: '',
                author: '',
                hot:false,
                content1:'',
                content2:'',
                desc: ''
            },
        }  
    },
      
    computed: {

    },
    created(){
        //从地址栏发送过来的id
        this.id = this.$route.params.id
        console.log(this.id);
        newsDetail({id:this.id}).then(res => {
            console.log(res);
            this.form = res.data;
        })
        //模拟网络请求获取内容，富文本就是带有行内样式的html字符串
        setTimeout(() => {
            this.tinContent = '<h2 style="color:red;">富文本</h2>'
        },2000)
    },
    mounted() {

    },
    methods: {
        onSubmit() {
            console.log('submit!');
      },
        getTin() {
            console.log('富文本内容:',this.tinContent)
        },
        setTin() {
            this.tinContent = this.$refs.tin.setContent('<p style="color:red;">今天天气不错!</p>')
        },
        handleRemove(file, fileList) {
            console.log(file, fileList);
        },
        handlePictureCardPreview(file) {
            this.dialogImageUrl = file.url;
            this.dialogVisible = true;
        }

    }
}
</script>

<style>

</style>